<!-- 仿微信右上角下拉框 -->
<template>
	<view>
		<view class="sideNavigator">
			<navigator url="/pages/addFriends/addFriends">添加好友</navigator>
			<navigator url="/pages/myBookList/myBookList">查看书籍</navigator>
			<navigator url="/pages/matchToSolve/matchToSolve?index=0">答题匹配</navigator>
		</view>
	</view>
</template>

<script>
</script>

<style scoped>
	.sideNavigator {
		position: relative;
		margin-top: 20rpx;
		width: 250rpx;
		background-color: #222;
		color: #eee;
		border-radius: 12rpx;
		display: flex;
		flex-flow: column;

		animation: popFromTopRight 0.1s;
	}

	@keyframes popFromTopRight {
		from {
			opacity: 0;
			transform: scale(0.8) translate(10%, -10%);
		}

		to {
			opacity: 1;
			transform: scale(1) translate(0, 0);
		}
	}

	.sideNavigator::before {
		position: absolute;
		top: -40rpx;
		right: 20rpx;
		content: "";
		width: 0;
		height: 0;
		border-width: 20rpx 16rpx;
		border-style: solid;
		border-color: transparent transparent #222 transparent;
	}

	.sideNavigator>navigator {
		text-align: center;
		padding: 30rpx 0;
		font-size: 0.8rem;
		border-bottom: 2rpx solid #444;
	}

	.sideNavigator>navigator:last-child {
		border: none;
	}
</style>